<template>
  <h2>用户管理</h2>
  <el-button @click="dialogFlag = true" type="primary">打开弹窗</el-button>
  <el-switch @change="handleSwitchChange" v-model="switchValue" :active-value="1" :inactive-value="0" :loading="false" />

  <!--文字按钮-->
  <el-popconfirm @confirm="handleDelete(111)" confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF" title="确定删除吗？">
    <template #reference>
      <el-button type="danger" :text="true">删除（文字按钮）</el-button>
    </template>
  </el-popconfirm>
  <fc-designer ref="designer"/>

  <!--弹窗-->
  <common-dialog v-model="dialogFlag" title="用户管理" :confirm="handleConfirm">
    <span>这是自定义的内容</span>
  </common-dialog>
</template>

<script lang="ts" setup>
import CommonDialog from '@/components/dialog/CommonDialog.vue'
import { ref } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import FcDesigner from '@form-create/designer'

const designer = ref<InstanceType<typeof FcDesigner>>()
const switchValue = ref<number>(0)
const dialogFlag = ref<boolean>(false)

const handleDelete = async (id: number) => {
  // await deleteInterface
  ElMessage.success('删除成功')
}

const handleSwitchChange = async () => {
  console.log(switchValue.value)
  ElMessage.info('点击了switch')
}

const handleConfirm = async () => {
  // 模拟接口请求
  const res = await new Promise((resolve) => {
    setTimeout(() => {
      resolve('接口返回的信息')
    }, 500)
  })
  console.log('输出:', res)
  dialogFlag.value = false
}

</script>

<style lang="scss" scoped>
</style>
